<template>
  <transition name="slideIn">
    <div class="view-box login container flex-c">
      <img class="left-up" src="../assets/images/login/pic_zuoshang_240x200.png">
      <img class="right-down" src="../assets/images/login/pic_youxia_1000x260.png">
      <img class="dot-1" src="../assets/images/login/pic_dian1_464x176.png">
      <img class="dot-2" src="../assets/images/login/pic_dian2_464x176.png">
      <div class="people-login flex-c">
        <div class="people-img">
          <img src="../assets/images/login/pic_rwch_350x300.png">
          <div class="col-white1 text-c chinese mb10">德盛在线课堂</div>
          <div class="col-white1 text-c english">DeSheng Online</div>
        </div>
        <div class="login-wrap">
          <div class="login-input flex-c"><label>账号</label><el-input v-model="formData.loginName" placeholder="请输入账号"></el-input></div>
          <div class="login-input flex-c"><label>密码</label><el-input v-model="formData.loginPwd" placeholder="请输入密码" show-password></el-input></div>
          <div class="login-btn"><span class="col-white1" @click="submitForm">登 录</span></div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
import { Base64 } from 'js-base64';
import { JSEncrypt } from 'jsencrypt';
const publicKey = 'MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCwjDm1HXDw8QH5ZtGMQIl2h/I8E+chOQA8aQ8xCR/+aHnROaN/ZU5Vmd2Zz7g6cAacR9BSm60+iSCYtvEGJKl0WqvbPGJkc8tedjNF1QqgWqkkuE6Udgw2OkEKJCxDg6PrAniR7Cc0io9G8bW4P8JDJjSbbafvMPDDFbVVUWJxxwIDAQAB';
export default {
  name: 'login',
  data () {
    const noChinese = (rule, value, callback) => {
      const reg = /[\u4e00-\u9fa5]/;
      if (reg.test(value)) {
        callback(new Error('不能为中文'));
      } else {
        callback();
      }
    };
    return {
      formData: {
        loginName: '', // 18859663160
        loginPwd: ''// nxin123456
      },
      rules: {
        loginName: [
          { required: true, message: '请输入手机/邮箱', trigger: 'blur' }
        ],
        loginPwd: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { validator: noChinese }
        ]
      },
      rememberPwd: false
    };
  },
  mounted () {
    let accountInfo = this.Common.getCookie('accountInfo');
    if (accountInfo) {
      let split = Base64.encode('__*^~^*__');
      let arr = accountInfo.split(split);
      this.formData.loginName = arr[0] ? Base64.decode(arr[0]) : '';
      if (this.formData.loginName && arr[1]) {
        this.formData.loginPwd = Base64.decode(arr[1]);
        this.rememberPwd = true;
      }
    }
  },
  methods: {
    submitForm () {
      if(!this.formData.loginName){
        this.$message.warning('请输入账号');
        return
      }
      if(!this.formData.loginPwd){
        this.$message.warning('请输入密码');
        return
      }
      const encryptor = new JSEncrypt();
      encryptor.setPublicKey(publicKey);
      let params = {
        loginName: this.formData.loginName,
        loginPwd: encryptor.encrypt(this.formData.loginPwd)
      };
      if (this.rememberPwd) {
        let accountInfo = Base64.encode(this.formData.loginName) + Base64.encode('__*^~^*__') + Base64.encode(this.formData.loginPwd);
        this.Common.setCookie('accountInfo', accountInfo);
      }
      this.$loading();
      this.Request.ajaxLogin({
        params: {
          // ip: returnCitySN.cip,
          ...params
        },
        success: async (data) => {
          data = data || {};
          this.Common.setCookie('accountDataInfo', JSON.stringify(data));
          sessionStorage.token = data.token;
          sessionStorage.userName = data.userName;
          sessionStorage.userId = data.userId;
          sessionStorage.roleName = data.roleName;
          sessionStorage.projectId = data.projectId;
          sessionStorage.mobile = data.mobile;
          sessionStorage.roleId = data.roleId;
          sessionStorage.permissions = data.permissions;
          // 登录后，存储权限数据，创建动态路由
          // const routes = await this.$store.dispatch('savePermission');
          // if (routes.length) {
          //   this.$router.addRoutes(routes);
          // }
          this.$loading().close();
          this.$router.replace({
            name: 'index'
          });
        },
        error: () => {
          this.$loading().close();
        }
      });
      // this.$refs.form.validate(valid => {
      //   if (valid) {
      //
      //   } else {
      //     return false;
      //   }
      // });
    }
  }
};
</script>
<style scoped lang="scss">
  @import "../css/module/login";
</style>
